<template>
  <a-spin :loading="loading" class="mt-10 w-full">
    <GiChart height="380px" :option="chartOption"></GiChart>
  </a-spin>
</template>

<script setup>
import { useChart } from '@/hooks'
import { graphDataChartOptionBar, formatSeries } from './data'

const chartOptionO = ref(graphDataChartOptionBar)

const props = defineProps(['checkKey', 'dataFormat'])
const loading = ref(false)

watch(
  () => [props.dataFormat, props.checkKey],
  () => {
    const series = []
    props.checkKey.forEach((key) => {
      const seriesItem = props.dataFormat[key]
      series.push(formatSeries(seriesItem, 'solid', key))
    })
    const graphDataChartOptionBarO = JSON.parse(JSON.stringify(graphDataChartOptionBar))
    graphDataChartOptionBarO.series = series
    graphDataChartOptionBarO.xAxis.data = props.dataFormat.date
    chartOptionO.value = graphDataChartOptionBarO
  },
  {
    deep: true,
    immediate: true
  }
)

const { chartOption } = useChart(() => {
  return chartOptionO.value
})
</script>
